<%--
  Created by IntelliJ IDEA.
  User: Ren
  Date: 2022/11/3
  Time: 21:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>所有用户的日志</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <link type="text/css" rel="stylesheet" href="/css/moregood.css"/>

    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>

<div id="app">

    <template>
        <el-table
                :data="tableData"
                style="width: 100%"

                :cell-style="styleBack"
                :header-cell-style="getRowClass"

        >


            <el-table-column
                    label="登录用户名"
                    width="160"
                    prop="name">

            </el-table-column>

            <el-table-column
                    label="登录时间"
                    width="250"
                    prop="loginTime">

            </el-table-column>

            <el-table-column
                    label="登录ip地址"
                    width="260"
                    prop="ip">

            </el-table-column>

            <el-table-column
                    label="登录使用的工具"
                    width="360"
                    prop="tool">

            </el-table-column>


        </el-table>
    </template>

</div>

</body>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            tableData: [],
        },

        created() {
            this.initMyTable();
        },

        methods: {
            //初始化数据
            initMyTable() {
                axios.get("/weblog/all").then(resp => {
                    this.tableData = resp.data.data
                })

            },

            // 表格奇偶层样式
            styleBack({row, column, rowIndex, columnIndex}) {
                if ((rowIndex + 1) % 2 === 0) {
                    return "background:#053c4a; color:#fff;border:1px solid #053c4a";
                } else {
                    return "background:#042831; color:#fff;border:1px solid #042831";
                }
            },
            // 表头样式
            getRowClass({rowIndex}) {
                return "background:#053c4a; color:#fff;border:3px solid #053c4a";
            },
        }

    })
</script>
</html>
